<template>
	<view class="page-body signIn" :class="[app.setCStyle()]">
	        <view class="top">
	            <view class="goLog fs24 color-ff" @click="app.goPage('signLog')">签到记录</view>
				<view class="weui-cell">
					<view class="weui-cell__bd">
						<view class="fs32 text-color" v-if="!isSign" @click='doSign'><text>立即</text>签到</view>
						<view class="text-color fs24" v-else >已签到</view>
					</view>
					<view class="p20 color-ff mt40 text-center">
						签到获赠积分+{{integral}}，您已连续签到{{constant}}天
							<view v-for="(item, index) in sign_constant" :key="index" class="mt10 color-cc" :class="item.day<=constant?'base-color':''">
								连续签到{{item.day}}天，额外获赠积分+{{item.integral}}
							</view>
					</view>
					
				</view>
	        </view>
	        <view class="Calendar">
	            <view id="toyear" class="flex flex-pack-center fs38 color_9">
	                <view class="year-month fs30 font-w700 color_3">
	                    {{year}}年{{month}}月
	                </view>
	            </view>
	            <view class='tou fs28 font-w700 color_3'>
	                <text>日</text>
	                <text>一</text>
	                <text>二</text>
	                <text>三</text>
	                <text>四</text>
	                <text>五</text>
	                <text>六</text>
	            </view>
	            <view class="dateBox">
	                <block v-for="(item, index) in dateArr" :key="index">
	                    <view class="fs30 font-w700 " :class="index<firstDay||index>=lastDay?'notMonth':''">
	                        <text :class="item.isSame?'signActive':''">{{item.date}}</text>
	                    </view>
	                </block>
	            </view>
	        </view>
	    <view class="model" v-if='modelType'>
	        <view class="modelBg" @click='closeModel'></view>
	        <view class="canter">
	            <view class='data'>
	                <p class="fs32 color_r">签到成功</p>
	                <view class="ff color_r">+{{total_integral}}</view>
	                <text class="fs24 color_9">获得积分</text>
	            </view>
	        </view>
	        <view class="closeBox" @click='closeModel'>
	            <image src='/static/public/images/close_wy.png'></image>
	        </view>
	    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSign: false,
				year: '',
				month: '',
				day: '',
				dateArr: [],
				firstDay: '',
				lastDay: '',
				signDay: [], //环形签到日期
				dayString: '', //当天时间戳
				modelType: false,
				sign_constant:{},
				integral:0,
				constant:0,
				total_integral:0,
			}
		},
		onLoad(options) {
			this.signIndex();
		},
		methods: {
			//获取签到信息
			signIndex() {
				this.$u.post('member/api.Center/signIndex').then(res => {
					if (res.code == 1 && res.data.signDay) {
						this.isSign = res.data.isSign == 1?true:false;
						this.constant = res.data.constant;
						this.sign_constant = res.data.sign_constant;
						this.signDay = res.data.signDay;
						this.dayString = res.data.timeData*1000;
						this.integral = res.data.use_integral;
					}
					this.setDate();
				});
			},
			//画日历
			setDate() {
				let mydate = new Date(this.dayString);
				this.year = mydate.getFullYear();
				this.month = mydate.getMonth() + 1;
				this.day = mydate.getDate();
				let firstDay = new Date(this.year, this.month - 1, 1).getDay();
				let Arr = [];
				let LastDay = new Date(this.year, this.month, 0).getDate();
				let isSame = false
				let signDay = this.signDay
				//用当月第一天在一周中的日期值作为当月离第一天的天数
				let tianNums = new Date(this.year, this.month - 1, 0).getDate();
		
				for (let i = 1; i <= firstDay; i++) {
					Arr.unshift({
						date: tianNums - i + 1
					});
				}
				
				//用当月最后一天在一个月中的日期值作为当月的天数
				for (var i = 1; i < LastDay + 1; i++) {
					isSame = false;
					for (var ii = 0; ii < signDay.length; ii++) {
						//是否签到
						if (signDay[ii] == i){
							isSame = true;
							break
						}
					}
					Arr.push({
						'date': i,
						'isSame': isSame
					});
				}
				//当月最后一天未满7天
				for (let i = 1, lastDayWeek = new Date(this.year, this.month - 1, LastDay).getDay(); i < 7 - lastDayWeek; i++) {
					Arr.push({
						date: i
					});
				}
				this.dateArr = Arr;
				this.firstDay = firstDay;
				this.lastDay = firstDay + LastDay;
			},
			//签到
			doSign() {
				if (this.isSign == false) {
					this.$u.post('member/api.Center/signIng').then(res => {
						if (res.code == 1) {
							this.modelType = true;
							this.total_integral = res.data.total_integral;
							this.signIndex();
						}
					});
				} else {
					uni.showToast({
					    title: '今天已经签到过！',
					    duration: 2000
					});
				}
			},
			closeModel(){
				this.modelType = false;
			}
		}
	}
</script>

<style>
	.text-color {
	    color: #ffc7be;
	}
	.top {
	    background: linear-gradient(221deg, rgba(42, 42, 42, 1), rgba(56, 56, 56, 1));
	    width: 100vw;
	    height: 53vh;
	    position: relative;
	}
	.goLog {
	    position: absolute;
	    right: 30rpx;
	    top: 30rpx;
	    z-index: 999;
	}
	.signIn .weui-cell__bd {
	    margin-top: 108rpx;
	    display: flex;
	    justify-content: center;
	}
	
	.signIn .weui-cell__bd view {
	    text-align: center;
	    position: relative;
	    z-index: 999;
	    width: 178rpx;
	    height: 178rpx;
	    border-radius: 50%;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	}
	.signIn .Calendar {
	    height: 59vh;
	    margin: -13vh 3vw 0 3vw;
	    width: 94vw;
	    background-color: #fff;
	    position: relative;
	    z-index: 999;
	}
	
	.signIn #toyear {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    height: 8vh;
	    padding: 0 40rpx;
	}
	
	.notMonth {
	    color: #999;
	}
	.signActive {
	    width: 80rpx;
	    height: 80rpx;
	    background: rgba(246, 82, 54, 0.14);
	    border-radius: 50%;
	    color: #f65236;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	
	.tou {
	    display: flex;
	    width: 100%;
	}
	
	.tou text {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    height: 5vh;
	}
	
	.dateBox {
	    display: flex;
	    flex-wrap: wrap;
	    width: 100%;
	    height: 46vh;
	    justify-content: space-between;
	}
	
	.signIn .model {
	    position: fixed;
	    top: 0;
	    left: 0;
	    height: 100vh;
	    width: 100vw;
	    z-index: 999998;
	}
	
	.signIn .modelBg {
	    position: absolute;
	    background-color: rgba(0, 0, 0, 0.6);
	    z-index: 99999;
	    top: 0;
	    left: 0;
	    height: 100vh;
	    width: 100vw;
	}
	
	.signIn .canter {
	    width: 96vw;
	    margin: 25vh 2vw 0 2vw;
	    height: 380rpx;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    position: relative;
	    z-index: 99999;
		background-color: #FFFFFF;
		color: #000000;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.signIn .canter .canterBG {
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    left: 0;
	    top: 0;
	    z-index: 999999988;
	}
	
	.signIn .canter .data {
	    position: relative;
	    z-index: 9999999888;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	
	.signIn .canter .data p {
	    margin-top: 50rpx;
	    display: block;
	}
	
	.signIn .canter .data view {
	    font-size: 74rpx;
	    margin-top: 50rpx;
	    line-height: 100rpx;
	}
	
	.signIn .closeBox {
	    margin-top: 0rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    position: relative;
	    z-index: 9999999999;
	}
	.signIn .closeBox image {
	    width: 72rpx;
	    height: 72rpx;
	}
	.dateBox view {
	    width: 14.2857%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	.signIn .weui-cell {
	    background: url('') no-repeat;
	    background-size: 100%;
	    height: 100%;
	    overflow: hidden;
	    position: relative;
	    padding: 0;
	    align-items: inherit;
	}
</style>
